<template>  
  <div>  
    <label for="date">选择日期:</label>  
    <input type="date" id="date" v-model="selectedDate" />  
  
    <label for="time">输入时间 (mm:ss):</label>  
    <input type="text" id="time" v-model="selectedTime" @input="validateTime" />  
  
    <button @click="saveDateTime">保存日期时间</button>  
    <button @click="resetDateTime">重置</button>  
  
    <!-- 保存时间显示框 -->  
    <div class="saved-time-box">  
        <p>保存的时间: {{ savedDateTime }}</p>  
      </div>
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      selectedDate: '', // 初始日期为空字符串  
      selectedTime: '00:00', // 初始时间为00:00  
      savedDateTime: '', // 保存的日期时间  
    };  
  },  
  methods: {  
    validateTime() {  
      // 简单的验证，确保时间格式正确 (mm:ss)  
      const timeRegex = /^([01]\d|2[0-3]):([0-5]\d)$/;  
      if (!timeRegex.test(this.selectedTime)) {  
        alert('请输入有效的时间格式 (mm:ss)');  
        this.selectedTime = '00:00'; // 重置为默认时间  
      }  
    },  
    saveDateTime() {  
      // 验证日期是否为空  
      if (!this.selectedDate) {  
        alert('请选择一个日期');  
        return;  
      }  
      // 验证时间是否有效  
      this.validateTime();  
        
      // 合并日期和时间，这里仅作为字符串展示，实际使用中可能需要转换为Date对象  
      this.savedDateTime = `${this.selectedDate}T${this.selectedTime}:00`; // 添加T和秒（这里假设秒为00）  
      // 可以添加保存逻辑，如发送到服务器等  
    },
    savedDateTime() {  
        // 假设你已经有了获取日期和时间的逻辑  
        // 这里只是一个示例，将当前日期和时间格式化为字符串并保存  
        const now = new Date();  
        const formattedDateTime = now.toISOString().slice(0, 19).replace('T', ' '); // ISO 8601 格式，只取日期和时间部分  
        this.savedDateTime = formattedDateTime;  
    
        // 这里可以添加保存逻辑，如发送到服务器等  
      },    
    resetDateTime() {  
      this.selectedDate = '';   
      this.savedDateTime = '';  
    },  
  },  
};  
 </script>  

  <style scoped>  
  .saved-time-box {  
    /* 添加一些样式来美化显示框 */  
    border: 1px solid #ccc;  
    padding: 10px;  
    margin-top: 10px;  
    /* ... 其他样式 ... */  
  }  
  </style>